{include="header"}

{function="jquery_ui()"}
{function="intent()"}

<div class ="wrapper">

	<div class = "main wrapper" id = "ride">
		<h1 class = "fr">{$e['explore']}
			<span class = "subhead">{$e['explore-help']}</span>
		</h1>

		<div class = "content">

			<img src="images/zoom-in.jpg" class = "zoom-in fr">
			<img src="images/zoom-out.jpg" class = "zoom-out fr">

			<div class = "mini-map">
				{loop="all_gallery"}
				<div class = "small-pin-wrapper s{$value.gid}">
					<img src="images/p{$value.gid}.png" class = "small-pin" height = "50">
					<div class = "popup">
						<img src = "{$value.image}" class = "fl logo-plaything"><h3>{$value.plaything}</h3>
						{$value.detail}
						<div class = "warning">
							{$value.warning}
						</div>
						<div class = "btn-gallery"><a href = "gallery.html?gid={$value.gid}">Gallery</a></div>
						<div class = "clear"></div>
					</div>
				</div>
				{/loop}

				<img src="images/mini-map.jpg" class = "map">
			</div>

			<div class = "zoom-display">
				<div class = "zoom-wrapper">
					<div id = "draggable">

						{loop="all_gallery"}
						<div class = "pin-wrapper p{$value.gid}">
							<img src="images/p{$value.gid}.png" class = "pin">
							<div class = "popup">
								<img src = "{$value.image}" class = "fl logo-plaything"><h3>{$value.plaything}</h3>
								{$value.detail}
								<div class = "warning">
									{$value.warning}
								</div>
								<div class = "btn-gallery"><a href = "gallery.html?gid={$value.gid}">Gallery</a></div>
								<div class = "clear"></div>
							</div>
						</div>
						{/loop}

						<img src="images/map.jpg" usemap="#maker">
					</div>
				</div>
			</div>

			<img src="images/sign.png" class = "sign">
		</div>
	</div>

</div>

<script>
	$(document).ready(function(){

		function hover(){
			$(this).find(".popup").stop().fadeIn('slow').show();
		}
		//On Hover Out
		function out(){
			$(this).find(".popup").stop().fadeOut('slow').hide();
		}

		var config = {
		   sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
		   interval: 0, // number = milliseconds for onMouseOver polling interval    
		   over: hover, // function = onMouseOver callback (REQUIRED)    
		   timeout: 0, // number = milliseconds delay before onMouseOut    
		   out: out // function = onMouseOut callback (REQUIRED)    
		};

		$(".small-pin-wrapper").hoverIntent(config);
		$(".pin-wrapper").hoverIntent(config);

		$(".small-pin").mouseover(function(){
			up($(this));
		});

		$(".small-pin").mouseout(function(){
			$(this).stop();
		});

		$(".pin").mouseover(function(){
			up($(this));
		});

		$(".pin").mouseout(function(){
			$(this).stop();
		});

		function up(obj){
			$(obj).animate({
				marginTop : '5px'
			}, 1000, "linear", function() {
				down(obj);
			});
		}

		function down(obj){
			$(obj).animate({
				marginTop : '-5px'
			}, 1000, "linear", function() {
				up(obj);
			});
		}

		$( "#draggable" ).draggable({ 
			containment: ".zoom-wrapper",
			scroll: false,
			cursor: "move"
		});

		$('.zoom-in').click(function(){
			$(this).hide();
			$(".zoom-out").show();
			$(".mini-map").hide();
			$(".zoom-display").show();
		});

		$('.zoom-out').click(function(){
			$(this).hide();
			$(".zoom-in").show();
			$(".zoom-display").hide();
			$(".mini-map").show();
		});
	});
</script>

{include="footer"}